<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>游戏排行榜</title>
<!-- https://www.17sucai.com/pins/demo-show?id=2895 -->
</head>

<body>

	<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

	<link type="text/css" rel="stylesheet" href="css/style.css">


	<div class="s-index-side">

		<div class="title">
			<h3>游戏Top10</h3>
			<span class="s-index-icon game-top10-icon">icon图标</span>
		</div>

		<ul class="weekly-list cls">
			<li class="" style="height: 39px;">
				<div class="app-show-title">
					<span class="num s-index-org">1.</span>
					<a href="http://www.17sucai.com/">植物大战僵尸2(高清版)</a>
				</div>
				<div class="app-show-block">
					<a href="http://www.17sucai.com/" class="pic">
						<img src="images/1.png" alt="植物大战僵尸2(高清版)">
					</a>
					<div class="s-index-star s-index-star-8">
						<span class="one">&nbsp;</span>
						<span class="two">&nbsp;</span>
						<span class="three">&nbsp;</span>
						<span class="four">&nbsp;</span>
						<span class="five">&nbsp;</span>
					</div>
					<a href="###" class="s-index-down s-index-icon">安&nbsp;装</a>
				</div>
			</li>
			<li class="" style="height: 39px;">
				<div class="app-show-title">
					<span class="num s-index-org">2.</span>
					<a href="http://www.17sucai.com/">节奏大师</a>
				</div>
				<div class="app-show-block">
					<a href="http://www.17sucai.com/" class="pic">
						<img src="images/2.png" alt="节奏大师">
					</a>
					<div class="s-index-star s-index-star-6">
						<span class="one">&nbsp;</span>
						<span class="two">&nbsp;</span>
						<span class="three">&nbsp;</span>
						<span class="four">&nbsp;</span>
						<span class="five">&nbsp;</span>
					</div>
					<a href="###" class="s-index-down s-index-icon">安&nbsp;装</a>
				</div>
			</li>
			<li class="current" style="height: 100px;">
				<div class="app-show-title">
					<span class="num s-index-org">3.</span>
					<a href="http://www.17sucai.com/">神庙逃亡2</a>
				</div>
				<div class="app-show-block">
					<a href="http://www.17sucai.com/" class="pic">
						<img src="images/3.png" alt="神庙逃亡2">
					</a>
					<div class="s-index-star s-index-star-9">
						<span class="one">&nbsp;</span>
						<span class="two">&nbsp;</span>
						<span class="three">&nbsp;</span>
						<span class="four">&nbsp;</span>
						<span class="five">&nbsp;</span>
					</div>
					<a href="###" class="s-index-down s-index-icon">安&nbsp;装</a>
				</div>
			</li>
			<li class="" style="height: 39px;">
				<div class="app-show-title">
					<span class="num">4.</span>
					<a href="http://www.17sucai.com/">地铁跑酷</a>
				</div>
				<div class="app-show-block">
					<a href="http://www.17sucai.com/" class="pic">
						<img src="images/4.png" alt="地铁跑酷">
					</a>
					<div class="s-index-star s-index-star-8">
						<span class="one">&nbsp;</span>
						<span class="two">&nbsp;</span>
						<span class="three">&nbsp;</span>
						<span class="four">&nbsp;</span>
						<span class="five">&nbsp;</span>
					</div>
					<a href="###" class="s-index-down s-index-icon">安&nbsp;装</a>
				</div>
			</li>
			<li class="" style="height: 39px;">
				<div class="app-show-title">
					<span class="num">5.</span>
					<a href="http://www.17sucai.com/">天天爱消除</a>
				</div>
				<div class="app-show-block">
					<a href="http://www.17sucai.com/" class="pic">
						<img src="images/5.png" alt="天天爱消除">
					</a>
					<div class="s-index-star s-index-star-7">
						<span class="one">&nbsp;</span>
						<span class="two">&nbsp;</span>
						<span class="three">&nbsp;</span>
						<span class="four">&nbsp;</span>
						<span class="five">&nbsp;</span>
					</div>
					<a href="###" class="s-index-down s-index-icon">安&nbsp;装</a>
				</div>
			</li>
			<li class="" style="height: 39px;">
				<div class="app-show-title">
					<span class="num">6.</span>
					<a href="http://www.17sucai.com/">天天酷跑</a>
				</div>
				<div class="app-show-block">
					<a href="http://www.17sucai.com/" class="pic">
						<img src="images/6.png" alt="天天酷跑">
					</a>
					<div class="s-index-star s-index-star-8">
						<span class="one">&nbsp;</span>
						<span class="two">&nbsp;</span>
						<span class="three">&nbsp;</span>
						<span class="four">&nbsp;</span>
						<span class="five">&nbsp;</span>
					</div>
					<a href="###" class="s-index-down s-index-icon">安&nbsp;装</a>
				</div>
			</li>
			<li class="" style="height: 39px;">
				<div class="app-show-title">
					<span class="num">7.</span>
					<a href="http://www.17sucai.com/">欢乐斗地主(完整版)</a>
				</div>
				<div class="app-show-block">
					<a href="http://www.17sucai.com/" class="pic">
						<img src="images/7.png" alt="欢乐斗地主(完整版)">
					</a>
					<div class="s-index-star s-index-star-9">
						<span class="one">&nbsp;</span>
						<span class="two">&nbsp;</span>
						<span class="three">&nbsp;</span>
						<span class="four">&nbsp;</span>
						<span class="five">&nbsp;</span>
					</div>
					<a href="###" class="s-index-down s-index-icon">安&nbsp;装</a>
				</div>
			</li>
			<li class="" style="height: 39px;">
				<div class="app-show-title">
					<span class="num">8.</span>
					<a href="http://www.17sucai.com/">水果忍者</a>
				</div>
				<div class="app-show-block">
					<a href="http://www.17sucai.com/" class="pic">
						<img src="images/8.png" alt="水果忍者">
					</a>
					<div class="s-index-star s-index-star-8">
						<span class="one">&nbsp;</span>
						<span class="two">&nbsp;</span>
						<span class="three">&nbsp;</span>
						<span class="four">&nbsp;</span>
						<span class="five">&nbsp;</span>
					</div>
					<a href="###" class="s-index-down s-index-icon">安&nbsp;装</a>
				</div>
			</li>
			<li class="" style="height: 39px;">
				<div class="app-show-title">
					<span class="num">9.</span>
					<a href="http://www.17sucai.com/">保卫萝卜</a>
				</div>
				<div class="app-show-block">
					<a href="http://www.17sucai.com/" class="pic">
						<img src="images/9.png" alt="保卫萝卜">
					</a>
					<div class="s-index-star s-index-star-9">
						<span class="one">&nbsp;</span>
						<span class="two">&nbsp;</span>
						<span class="three">&nbsp;</span>
						<span class="four">&nbsp;</span>
						<span class="five">&nbsp;</span>
					</div>
					<a href="###" class="s-index-down s-index-icon">安&nbsp;装</a>
				</div>
			</li>
			<li class="" style="height: 39px;">
				<div class="app-show-title">
					<span class="num">10.</span>
					<a href="http://www.17sucai.com/">消灭星星</a>
				</div>
				<div class="app-show-block">
					<a href="http://www.17sucai.com/" class="pic">
						<img src="images/10.png" alt="消灭星星">
					</a>
					<div class="s-index-star s-index-star-8">
						<span class="one">&nbsp;</span>
						<span class="two">&nbsp;</span>
						<span class="three">&nbsp;</span>
						<span class="four">&nbsp;</span>
						<span class="five">&nbsp;</span>
					</div>
					<a href="###" class="s-index-down s-index-icon">安&nbsp;装</a>
				</div>
			</li>
		</ul>

	</div>



	<script type="text/javascript">
		$(function() {

			$(".weekly-list li").bind("mouseenter", weekly_ani).bind(
					"mouseleave", function() {
						clearTimeout($(this).data("setTime"));
					});

			function weekly_ani(e) {
				var me = $(e.target).closest("li");
				if (me.hasClass("current"))
					return;
				var orili = me.parent().find(".current");
				$(this).data("setTime", setTimeout(function() {
					weekly_move(me, orili, 100, 39)
				}, 150));
			}

			function weekly_move(me, orili, h, h2) {
				me.addClass("current");
				$(".weekly-list li").unbind("mouseenter", weekly_ani);
				setTimeout(function() {
					var cur_h = me.height();
					if (cur_h < h - 2) {
						var cur_orih = orili.height();
						var dh = Math.round((h - cur_h) / 2.5);
						me.css("height", cur_h + dh);
						orili.css("height", cur_orih - dh);
						setTimeout(arguments.callee, 25);
					} else {
						me.addClass("current").css("height", h);
						orili.css("height", h2);
						$(".weekly-list li").bind("mouseenter", weekly_ani);
						orili.removeClass("current");
					}
				}, 25);
			}

			$(".weekly-list").find("li:first").addClass("current").animate({
				height : 100
			}, 300);

		});
	</script>


</body>
</html>